<template>
	<view :style="{
		'height': '100vh',
		'back-groundcolor':'#00000000',
		}">
		<view>
			<!-- 横向卡片 -->
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" :style="{
					'position': 'fixed',
					'flex': 1,
					'bottom': cardData.cardHeight+cardData.minBottomHeight+'px', 
					'left': 0
					}">

				<view v-for="item in test" class="scroll-view-item_X" :style="{
					'margin':'10rpx',
					'border-radius': '15rpx',
					'height': height.split('px')[0]/3 + 'px',
					'width': '75%',
					'background': '#ffffff',
					}">
					<image :src='item.content' :style="{
						'border-top-left-radius':'15rpx',
						'border-top-right-radius':'15rpx',
						'height': '65%',
						'width': '100%',
						'display':'flex'
						}">
					</image>

					<view :style="{
						'line-height': '12rpx',
						'margin-top': '20rpx',
						'margin-left': '5rpx',
						'display':'flex'
						}">
						<text :style="{
							'font-size': '40rpx'
							}">
							{{item.des}}
						</text>
					</view>

					<view :style="{
						'line-height': '12rpx',
						'margin-top': '25rpx',
						'margin-left': '5rpx',
						'display':'flex'
						}">
						<text :style="{
							'font-size': '30rpx',
							'color': '#909399'
							}">
							距离：{{item.len}}km
						</text>
					</view>

				</view>
			</scroll-view>
		</view>
		<!-- 弹出卡片 -->
		<view class="pop-card" @touchmove.stop="touchmoveHandle" @touchstart="touchstartHandle"
			@touchend="touchendHandle" :style="{
					'border-top-left-radius': leftRadius,
					'border-top-right-radius': rightRadius,
				    'height': height,
					'width':'100%',
					'bottom':bottom,
					'background': '#ffffff',
					}">
			<!-- 浅色选中条？？ -->
			<view :style="{
						'justify-content':'center',
						'align-items':'center',
						'display':'flex'
						}">
				<view :style="{
					'width': '40rpx',
					'height': '8rpx',
					'margin-top': '65rpx',
					'background': '#dfe5f1',
					'border-radius': '4rpx',
					}">
				</view>
			</view>
			<!-- 下弹选择框 -->
			<view :style="{
				'margin-top': '65rpx',
				}">
				<zb-dropdown-menu active-color="#02a1f6" style="width: 100%">
					<zb-dropdown-item name="综合" :options="option1" v-model="value2"
						@change="change1"></zb-dropdown-item>
					<zb-dropdown-item name="距离优先" :options="option2" v-model="value1"
						@change="change2"></zb-dropdown-item>
					<zb-dropdown-item name="球场大小" :options="option2" v-model="value1"
						@change="change2"></zb-dropdown-item>
				</zb-dropdown-menu>
			</view>

			<view style="margin-top: 10px;">
				<!-- 这里是竖直滑动布局的头 -->
				<scroll-view scroll-y="true" class="scroll-Y" @touchmove.stop :style="{
					'height': scrollHeight
					}">
					<view v-for="item in test" class="scroll-view-item_X" @click="toAppointment(item)" :style="{
							'margin':'15rpx',
							'border-radius': '15rpx',
							'height':height.split('px')[0]/3 + 'rpx',
							'width':'auto',
							'box-shadow':'0 0 4px rgba(95, 95, 95, 0.5)',
							'display':'flex',
							}">

						<image :src='item.content' :style="{
								'border-radius':'10rpx',
								'margin-right':'1%',
								'top':'5%',
								'margin-left':'1%',
								'height': '90%' ,
								'width': height.split('px')[0]/3.5 + 'rpx'
								}">
						</image>

						<view :style="{
								'line-height': '12rpx'
								}">
							<view :style="{
									'margin-top': '27rpx',
									'font-size': '40rpx'
									}">
								{{item.des}}
							</view>
							<view :style="{
									'margin-top': '27rpx',
									'font-size': '30rpx',
									'color': '#909399'
									}">
								距离：{{item.len}}km
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 顶部弹出条 -->
		<view :style="{
			'border-radius': '30rpx',
			'height': '8%',
			'width': '100%',
			'left':left,
			'background': '#ffffff',
			'top': cardData.margin2topMin/2 + 'px',
			'position': 'fixed',
			'align-items':'center',
			'display':'flex'
			}">
			<!-- 缩回按钮 -->
			<view @click="back" :style="{
				'margin-left': '10rpx',
				'width':'10%',
				'color': '#909399',
				'font-size': '70rpx',
				'transform':deg,
				'transform-origin': 'center',
				}">
				>
			</view>

			<view :style="{
				'width':'80%',
				'margin-left': '70rpx',
				'position':'fixed',
				'flex':'1'
				}">
				<uni-segmented-control :current="current" :values="items1" style-type="text" active-color="#007aff"
					@clickItem="onClickItem" />
			</view>
		</view>


	</view>
</template>

<script>
	/*

	 */
	let windowHeight = uni.getWindowInfo().windowHeight;
	let cardData = {}
	export default {
		name: 'UniCard',
		props: {
			leftRadius: {
				type: String,
				default: '30px'
			},
			rightRadius: {
				type: String,
				default: '30px'
			},
			baseMargin: {
				type: String,
				default: "0.1"
			},
			base2TopMargin: {
				type: String,
				default: "0.2"
			}
		},
		data() {
			let baseMargin = this.$props.baseMargin;
			let base2TopMargin = this.$props.base2TopMargin;

			cardData = {
				cardHeight: windowHeight * (1 - base2TopMargin),
				midHeight: windowHeight * 0.5,
				minBottomHeight: -windowHeight * (1 - 2 * baseMargin),
				maxBottomHeight: 0,
				margin2topMax: windowHeight * (1 - base2TopMargin),
				margin2topMin: windowHeight * base2TopMargin,
			}
			return {
				cardData: cardData,
				deg: 'rotate(180deg)',
				bottom: cardData.minBottomHeight + 'px',
				height: cardData.cardHeight + 'px',
				windowHeight: uni.getWindowInfo().windowHeight,
				freshY: cardData.margin2topMin,
				lastY: cardData.margin2topMin,
				left: '10000px',
				offSetTemp: 0,
				scrollHeight: cardData.midHeight + 55 + 'px',
				test: [{
					id: 1,
					content: 'https://img1.baidu.com/it/u=4262712865,2305885394&fm=253&fmt=auto&app=120&f=JPEG?w=380&h=380',
					des: '足球场1',
					len: 1,
				}, {
					id: 2,
					content: 'https://img1.baidu.com/it/u=2867757728,1865737742&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500',
					des: '足球场2',
					len: 2,
				}, {
					id: 3,
					content: 'https://img1.baidu.com/it/u=2077120137,558466044&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
					des: '足球场3',
					len: 3,
				}, {
					id: 4,
					content: 'https://img0.baidu.com/it/u=309850890,1390279723&fm=253&fmt=auto&app=138&f=JPEG?w=938&h=500',
					des: '足球场4',
					len: 4,
				}, {
					id: 5,
					content: 'https://img0.baidu.com/it/u=309850890,1390279723&fm=253&fmt=auto&app=138&f=JPEG?w=938&h=500',
					des: '足球场5',
					len: 4,
				}],
				items1: ['社会球场', '商业球场', '自建球场', '球友匹配'],
				current: 0,
				value1: 0,
				value2: 1,
				option1: [{
						text: 'test1',
						value: 0
					},
					{
						text: 'test2',
						value: 1
					},
					{
						text: 'test3',
						value: 2
					},
				],
				option2: [{
						text: 'test4',
						value: 0
					},
					{
						text: 'test5',
						value: 1
					},
					{
						text: 'test6',
						value: 2
					},
				],
				on: false,
			};

		},
		appointSuccess() {
			uni.showToast({
				title: '预约成功',
				icon: 'none',
			});
		},
		methods: {
			toAppointment(obj) {
				var id = null
				uni.navigateTo({
					url: "/pages/index/appointment",
					events: {
						callBack: function(data) {
							if (data == true) {
								id = setInterval(() => {
									uni.$emit('updateObj', obj)
								}, 500)
							} else {
								clearInterval(id)
							}
						}
					}
				})
			},
			onClickItem(e) {
				this.left = '0px';
				this.deg = 'rotate(0deg)'
				console.log(e.currentIndex)

			},
			back() {
				if (this.deg == 'rotate(0deg)') {
					this.left = '90%';
					this.deg = 'rotate(180deg)'
				} else {
					this.left = '0px';
					this.deg = 'rotate(0deg)'
				}
			},
			change1() {

			},
			change2() {

			},
			touchstartHandle(event) {
				if (event.touches[0].pageY > cardData.margin2topMax) {
					this.freshY = this.lastY = cardData.margin2topMax;
				} else {
					this.freshY = this.lastY = event.touches[0].pageY;
				}
				//初状态时，触摸位置若在卡片内，则不合法，强制设置在卡片顶部
				uni.$emit('test', false);//用于修复下弹选择框的bug
			},
			touchendHandle(event) {
				let currentHeight = Number(this.bottom.split('px')[0]);
				if (currentHeight == cardData.minBottomHeight) {
					//点按触发，卡片弹出
					if (this.offSetTemp == 0) {
						this.bottom = cardData.maxBottomHeight + 'px';
					}
				} else {
					if (this.offSetTemp == 0) {
						return; //出现偏移后，点击无效
					}
					if (this.offSetTemp >= 30) {
						this.bottom = cardData.minBottomHeight + 'px';
						//向下滑动大于15，松手后卡片缩回
						this.left = '100%';
					} else if (this.offSetTemp > 0) {
						this.bottom = cardData.maxBottomHeight + 'px';
						this.offSetAll = cardData.maxBottomHeight //偏移最大
						//向下滑动小于15，松手后卡片复位
					}
					if (this.offSetTemp <= -30) {
						this.bottom = cardData.maxBottomHeight + 'px';
						this.left = '0px';
						this.deg = 'rotate(0deg)'
						//向上滑动大于15，松手后卡片弹出。此处上滑offSetTemp为负
					} else if (this.offSetTemp < 0) {
						this.bottom = cardData.minBottomHeight + 'px';
						//向上滑动小于15，松手后卡片复位
						this.left = '100%';
					}
				}
				this.offSetTemp = 0 //不管什么牛鬼蛇神，清零
			},
			touchmoveHandle(event) {
				let currentHeight = Number(this.bottom.split('px')[0]);
				let currentY = event.touches[0].pageY
				let newHeight = 0; //滑动后的卡片高度，向上为负
				let dir = currentY - this.freshY; //记录滑动方向(实时滑动距离)
				let base = cardData.minBottomHeight;
				this.offSetTemp = currentY - this.lastY //记录总滑动距离
				if (currentY < cardData.margin2topMax && currentY > cardData.margin2topMin) {
					//确保在卡片区域外的移动无效
					if (dir < 0 && currentHeight == cardData.maxBottomHeight) {
						return; //确保在卡片位移最大时，向上拉没用
					}
					newHeight = currentHeight - dir; //计算滑动后的卡片高度
					if (newHeight > 0) {
						return; //底部超过0，就停止
					}
					//console.log(newHeight)
					//实时更新卡片位置
					//console.log(1-newHeight/base);
					this.left = (newHeight / base) * 100 + '%'
					this.deg = 'rotate(' + (newHeight / base) * 200 + 'deg)'
					this.bottom = newHeight + 'px';
					//实时更新触摸位置
					this.freshY = event.touches[0].pageY
				}
			},
		}
	}
</script>

<style lang="scss">
	$uni-spacing-sm: 8px !default;


	.uni-bg-blue {
		background: #007AFF;
		color: #FFF;
	}

	.pop-card {
		position: fixed;
	}

	.scroll-view-item_X {
		display: inline-block;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		refresher-background: #ff5500;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>